---
title: Accordion
description: A vertically stacked set of interactive headings that each reveal an associated section of content.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-headless-accordion" />

## Installation

<ComponentInstallation name="components-headless-accordion" />

## Usage

```tsx
<Accordion>
  <AccordionItem>
    <AccordionButton>Accordion Item 1</AccordionButton>
    <AccordionPanel>
      <div>Accordion Content 1</div>
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionButton>Accordion Item 2</AccordionButton>
    <AccordionPanel>
      <div>Accordion Content 2</div>
    </AccordionPanel>
  </AccordionItem>
</Accordion>
```

## API Reference

### Accordion

<TypeTable
  type={{
    '...props': {
      description: 'The props of the accordion.',
      type: 'React.ComponentProps<"div">',
      required: false,
    },
  }}
/>

### AccordionItem

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/headless/disclosure#disclosure"
  text="Animate UI API Reference - Disclosure Primitive"
/>

<ExternalLink
  href="https://headlessui.com/react/disclosure#disclosure"
  text="Headless UI API Reference - Disclosure"
/>
</div>

### AccordionButton

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/headless/disclosure#disclosurebutton"
  text="Animate UI API Reference - Disclosure Button Primitive"
/>

<ExternalLink
  href="https://headlessui.com/react/disclosure#disclosure-button"
  text="Headless UI API Reference - DisclosureButton"
/>
</div>

<TypeTable
  type={{
    showArrow: {
      description: 'Whether to show the arrow icon.',
      type: 'boolean',
      required: false,
      default: 'true',
    },
  }}
/>

### AccordionPanel

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/headless/disclosure#disclosurepanel"
  text="Animate UI API Reference - Disclosure Panel Primitive"
/>

<ExternalLink
  href="https://headlessui.com/react/disclosure#disclosure-panel"
  text="Headless UI API Reference - DisclosurePanel"
/>
</div>

<TypeTable
  type={{
    transition: {
      description: 'The transition of the accordion panel',
      type: 'Transition',
      required: false,
      default: "{ type: 'spring', stiffness: 150, damping: 22 }",
    },
    keepRendered: {
      description:
        'Whether to keep the accordion panel rendered (useful for SEO)',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    '...props': {
      description: 'The props of the accordion panel.',
      type: 'HTMLMotionProps<"div">',
      required: false,
    },
  }}
/>

## Credits

- [Headless UI Accordion](https://headlessui.com/react/disclosure)
- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/accordion) for style inspiration.
